<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spirit8</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet/less" href="css/reset.less">
  <link rel="stylesheet/less" href="css/common.less">
  <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
  <!-- 头部导航栏开始 -->
  <nav class="navbar navbar-default navBgColor">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Spirit8</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">about</a></li>
          <li><a href="#team">team</a></li>
          <li><a href="#services">services</a></li>
          <li><a href="#clients">clients</a></li>
          <li><a href="#work">work</a></li>
          <li><a href="#testimonials">testimonials</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <!-- 头部导航栏结束 -->
  <!-- banner区开始 -->
  <div id="banner">
    <h1>wELCOME on <span>spirit8</span></h1>
    <h5>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></h5>
    <div class="arrow">
      <a href="#foot"><img src="images/arrow.png" alt=""></a>
    </div>
  </div>
  <!-- banner区结束 -->
  <!-- 关于About区开始 -->
  <div id="about">
    <div class="container">

      <div class="aboutLeft">
        <img src="images/about-background.png" alt="">
      </div>

      <div class="aboutRight">
        <div class="small-item">ABOUT US</div>
        <div class="big-title">Some words <span>about us</span></div>
        <div class="line"></div>
        <div class="text">
          We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we
          brand companies in a way they will never forget.
        </div>
        <ul>
          <li><img src="images/icon16.png" alt="">
            Mission - <span>We deliver uniqueness and quality</span>
          </li>
          <li><img src="images/icon16.png" alt="">
            Skills - <span>Delivering fast and excellent results</span>
          </li>
          <li><img src="images/icon16.png" alt="">
            Skills - <span>Satisfied clients thanks to our experience</span>
          </li>
        </ul>
        <div class="about-btn">
          <img src="images/about-btn.png" alt="">
          BROWSE OUR WORK
        </div>
      </div>

    </div>
  </div>
  <!-- 关于About区结束 -->
  <!-- Team区开始 -->
  <div id="team">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="carousel-item">
            <div class="title">Meet <span>Our Team</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="teamBox">
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jason Statham</div>
                  <div class="job">Knife designer</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Van Damme</div>
                  <div class="job">No English</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Sylvester Stallone</div>
                  <div class="job">Cigar Lover</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jet Li</div>
                  <div class="job">I need more money</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title">Meet <span>Our Team</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="teamBox">
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jason Statham</div>
                  <div class="job">Knife designer</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Van Damme</div>
                  <div class="job">No English</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Sylvester Stallone</div>
                  <div class="job">Cigar Lover</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jet Li</div>
                  <div class="job">I need more money</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title">Meet <span>Our Team</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="teamBox">
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jason Statham</div>
                  <div class="job">Knife designer</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Van Damme</div>
                  <div class="job">No English</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
              <div class="left">
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Sylvester Stallone</div>
                  <div class="job">Cigar Lover</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
                <div class="leftbox">
                  <div class="circle">
                    <img src="images/avatar.jpg" alt="">
                  </div>
                  <div class="name">Jet Li</div>
                  <div class="job">I need more money</div>
                  <div class="text">Do not seek to change what has come before. Seek to create that which has not.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Team区结束 -->
  <!-- Services区开始 -->
  <div id="services">
    <div class="container">
      <div class="title">Take a look at <span>Our Services</span></div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="intro">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </div>
      <div class="bigbox">
        <div class="mediumbox">
          <div class="littlebox">
            <div class="circle">
              <img src="images/Forma 1.png" alt="">
            </div>
            <div class="servicesName">Web Design</div>
            <div class="servicesIntro">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
          </div>
          <div class="littlebox">
            <div class="circle">
              <img src="images/Forma 2.png" alt="">
            </div>
            <div class="servicesName">Mobile apps</div>
            <div class="servicesIntro">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
          </div>
        </div>
        <div class="mediumbox">
          <div class="littlebox">
            <div class="circle">
              <img src="images/Forma 3.png" alt="">
            </div>
            <div class="servicesName">PHOTOGRAPHY</div>
            <div class="servicesIntro">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
          </div>
          <div class="littlebox">
            <div class="circle">
              <img src="images/Forma 4.png" alt="">
            </div>
            <div class="servicesName">marketing</div>
            <div class="servicesIntro">
              The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Services区结束 -->
  <!-- Clients区开始 -->
  <div id="clients">
    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="carousel-item">
            <div class="title">SOME OF <span>OUR CLIENTS</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="fonts">
              <img src="images/fonts5.png" alt="">
            </div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title">SOME OF <span>OUR CLIENTS</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="fonts">
              <img src="images/fonts5.png" alt="">
            </div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title">SOME OF <span>OUR CLIENTS</span></div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="fonts">
              <img src="images/fonts5.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Clients区结束 -->
  <!-- Work区开始 -->
  <div id="work">
    <div class="container">
      <div class="title">Take a look at <span>Our Work</span></div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="intro">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </div>
      <div class="worknav">
        <div class="type">Filter by type</div>
        <div class="choices">
          <div class="opt choose">All</div>
          <div class="opt">Web design</div>
          <div class="opt">Mobile design</div>
          <div class="opt">Photograpy</div>
        </div>
        <select name="" id="">
          <option value="All">All</option>
          <option value="Web_design">Web design</option>
          <option value="Mobile_design">Mobile design</option>
          <option value="Photograpy">Photograpy</option>
        </select>
      </div>
      <div class="bigbox">
        <!-- 第一排 -->
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item.png" alt="">
        </div>
        <!-- 第二排 -->
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item2.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item2.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item2.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item2.png" alt="">
        </div>
        <!-- 第三排 -->
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item3.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item3.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item3.png" alt="">
        </div>
        <div class="smallbox">
          <div class="mengban">
            <div class="fashion">Trend and fashion</div>
            <div class="design">Website design</div>
            <div class="more">+</div>
          </div>
          <img src="images/item3.png" alt="">
        </div>


      </div>
    </div>
  </div>
  <!-- Work区结束 -->
  <!-- testimonials区开始 -->
  <div id="testimonials">
    <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="carousel-item">
            <div class="title"><span>OUR CLIENTS'</span> testimonials</div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="intro">
              This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
              Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <div class="dean"><span>Dean Martin,</span> CEO Acme Inc.</div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title"><span>OUR CLIENTS'</span> testimonials</div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="intro">
              This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
              Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <div class="dean"><span>Dean Martin,</span> CEO Acme Inc.</div>
          </div>
        </div>
        <div class="item">
          <div class="carousel-item">
            <div class="title"><span>OUR CLIENTS'</span> testimonials</div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="intro">
              This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of
              Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </div>
            <div class="dean"><span>Dean Martin,</span> CEO Acme Inc.</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- testimonials区结束 -->
  <!-- Contact区开始 -->
  <div id="contact">
    <div class="container">
      <div class="title">feel free to <span>contact us</span></div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="intro">
        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
        Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </div>
      <div class="form">
        <div class="namebox">
          <div class="name">name<sup>*</sup></div>
          <input type="text">
        </div>
        <div class="emailbox">
          <div class="email">Email Address<sup>*</sup></div>
          <input type="text">
        </div>
        <div class="msgbox">
          <div class="msg">Message<sup>*</sup></div>
          <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
        <div class="ob"></div>
        <button>SEND</button>
      </div>
    </div>
  </div>
  <!-- Contact区结束 -->
  <!-- footer区开始 -->
  <footer id="foot">
    <div class="container">
      <div class="left">
        ALL RIGHTS RESERVED. COPYRIGHT &copy; 2014 <span>SPIRIT8</span>
      </div>
      <div class="right">
        <div class="box">
          <img src="images/facebook.png" alt="">
        </div>
        <div class="box">
          <img src="images/twitter.png" alt="">
        </div>
        <div class="box">
          <img src="images/google.png" alt="">
        </div>
        <div class="box">
          <img src="images/linkedin.png" alt="">
        </div>
        <div class="box">
          <img src="images/dribbble.png" alt="">
        </div>
      </div>
    </div>
  </footer>
  <!-- footer区结束 -->
</body>

<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script src="js/less.min.js"></script>
<script>
  // 锚点跳转滑动效果 $ => jquery 选择器 写法跟css选择器一样
  $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function () {
    // 判断当前的路径是否跟事件的路径一致
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      // /index.html
      // let reg = /^\//;
      // console.log(location.pathname.match(reg));
      // console.log(location.pathname.replace(/^\//,''));
      // 获取元素（string） => 实例对象 通过id选择器获取
      let target = $(this.hash);// #el
      // console.log(this.hash);
      console.log(location);

      // $('[name="banner"]')
      target = target.length > 0 && target || $('[name=' + this.hash.slice(1) + ']');

      // 一定要当他找到锚点元素的时候，才跳转锚点
      if (target.length > 0) {
        // 获取目标元素的位置
        var targetOffset = target.offset().top + 10;

        //让页面的body和html 滚动到 targetOffset这个位置
        $('html,body').animate({
          scrollTop: targetOffset
        }, 1000);
      }
    }
  })
</script>

</html>